<template>
	<view>
		<view class="applier">


			<view>

				<text class="iconfont icon-fuzhushuxian" color="#007AFF">发起人信息</text>
			</view>
			<view><text>流水号</text><text>{{set.mun}}</text></view>
			<view><text>姓名</text><text>{{set.name}}</text></view>
			<view><text>部门</text><text>{{set.department_name}}</text></view>
			<view><text>岗位</text><text>{{set.post_name}}</text></view>
			<view><text>发起时间</text><text>{{set.applytime}}</text></view>

		</view>
		<!-- 请假申请显示内容 -->
		<view class="animation" v-show="type=='事假'||type=='年假'||type=='病假'?true:false">
			<view>
				<text class="iconfont icon-fuzhushuxian" color="#007AFF">申请信息</text>
			</view>
			<view><text>请假类型</text><text>{{set.type}}</text></view>
			<view><text>开始时间</text><text>{{set.starttime}}</text></view>
			<view><text>结束时间</text><text>{{set.endtime}}</text></view>
			<view><text>请假时长（天）</text><text>{{days}}</text></view>
			<view><text>请假事由</text><text>{{set.content}}</text></view>
		</view>
		<!-- 调薪申请显示内容 -->
		<view class="animation" v-show="type=='调薪'?true:false">
			<view>
				<text class="iconfont icon-fuzhushuxian" color="#007AFF">申请信息</text>
			</view>
			<view><text>当前薪资</text><text>{{set.money}}</text></view>
			<view><text>期望薪资</text><text>{{set.newmoney}}</text></view>
			<view><text>调薪说明</text><text>{{set.content}}</text></view>

		</view>
		<!-- 转岗申请显示内容 -->
		<view class="animation" v-show="type=='转岗'?true:false">
			<view>
				<text class="iconfont icon-fuzhushuxian" color="#007AFF">转岗信息</text>
			</view>
			<view><text>新部门</text><text>{{newpart}}</text></view>
			<view><text>新岗位</text><text>{{newjobs}}</text></view>
			<view><text>转岗原因</text><text>{{set.content}}</text></view>

		</view>
		<!-- 外勤申请显示内容 -->
		<view class="animation" v-show="type=='外勤'?true:false">
			<view>
				<text class="iconfont icon-fuzhushuxian" color="#007AFF">外勤信息</text>
			</view>

			<view><text>开始时间</text><text>{{set.starttime}}</text></view>
			<view><text>结束时间</text><text>{{set.endtime}}</text></view>
			<view><text>时长（小时）</text><text>{{hours}}</text></view>
			<view><text>外出地点</text><text>{{set.out_place}}</text></view>
			<view><text>外出详情</text><text>{{set.content}}</text></view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		onMounted,
		computed
	} from 'vue';
	import store from '~@/store/index.js'
	import $http from "../../utils/http.js"
	export default {
		setup() {
			let data = reactive({
				days: 0,
				hours: 0,
				newpart: '1',
				newjobs: '2',
				// 计算请假时长
				DateDiff(sDate1, sDate2) { //sDate1和sDate2是2002-12-18格式 
					let aDate, oDate1, oDate2, iDays, iHours
					aDate = sDate1.split("-")
					oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为12-18-2002格式 
					aDate = sDate2.split("-")
					oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
					iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数 
					iHours = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60) //把相差的毫秒数转换为天数 
					data.days = iDays
					data.hours = iHours

				},
				getdata: () => {
					if (data.set.newjobs) {
$http({
						url: '/Personalcenter/post/get',
						data: {
							postname: data.set.newjobs
						}
					}).then((res) => {
						data.newpart = res.data.data[0].department_name
						data.newjobs = res.data.data[0].post_name
					})
					}
					
				}
			})
			onMounted(() => {
				data.DateDiff(data.set.starttime, data.set.endtime)
				data.getdata()
			})
			data.set = computed(() => {
				return store.state.tangxiaoyun.set
			})
			data.type = computed(() => {
				return store.state.tangxiaoyun.set.type
			})

			return {
				...toRefs(data)
			}
		}
	}
	// export default {
	//页面直接传数据，可以实现
	// onLoad: function(option) {
	// 	const eventChannel = this.getOpenerEventChannel();
	// 	// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
	// 	eventChannel.on('acceptDataFromOpenerPage', data => {
	// 		this.set = data.data
	// 		this.type = data.data.type
	// 		console.log(this.type)
	// 	})
	// 	this.DateDiff(this.set.starttime, this.set.endtime)
	// 	console.log(this.days)
	// },
	// 	data() {
	// 		return {
	// 			set: [1, 2],
	// 			days: 0,
	// 			hours: 0,
	// 			type: ""
	// 		}
	// 	},
	// }
</script>

<style>
	@import url("~@/static/font/iconfont.css");

	page {
		background-color: #f2f2f2;
	}

	.applier,
	.animation {
		margin: 20rpx 0 10rpx 20rpx;
		background-color: white;
		border-radius: 10px;

	}

	.applier>view,
	.animation>view {
		border-bottom: 1px solid #F2F2F2;
		height: 90rpx;
		line-height: 90rpx;
		margin-left: 20rpx;
		display: flex;

	}

	.applier>view>text:first-child,
	.animation>view>text:first-child {
		flex: 2
	}

	.applier>view>text:last-child,
	.animation>view>text:last-child {
		flex: 3
	}

	.iconfont {
		color: #488CEE;
	}
</style>
